<template>
    <view class="container">
        <u-list
            @scrolltolower="scrolltolower"
        >
            <!-- #ifdef H5 -->
            <view style="height: 15px"></view>
            <!-- #endif -->
            <u-row
                customStyle="flex-wrap: wrap;margin:30rpx 0;align-items:stretch;"
                :gutter="15"
            >
                <u-col
                    span="6"
                    v-for="(item, index) in indexList"
                    :key="index"
                >
                    <product-item :info="item"></product-item>
                </u-col>
            </u-row>
            <u-loadmore
                v-if="total > 0"
                :status="status"
                fontSize="30rpx"
                marginTop="15rpx"
                marginBottom="15rpx"
                line
            />
        </u-list>
    </view>
</template>
<script>
import ProductItem from "@/components/ProductItem"
import { getIndexMore } from "@/config/api"
export default {
    components: {
        ProductItem
    },
    data() {
        return {
            indexList: [],
            listQuery: {
                page: 1,
                list_rows: 10,
                categoryId: null
            },
            total: 0,
            status: 'loading'
        }
    },
    onLoad(option) {
        this.listQuery = {...this.listQuery, ...option}
        console.log(option)
        this.getData()
        console.log(this.listQuery)
    },
    methods: {
        scrolltolower() {
            if (this.total > this.indexList.length) {
                this.listQuery.page += 1
                this.getData(true)
            }
        },
        async getData(more = false) {
            const res = await getIndexMore(this.listQuery)
            if (more) {
                this.indexList = [...this.indexList, ...res.items]
            } else {
                this.indexList = res.items
            }
            this.total = res.total
            if (this.total <= this.indexList.length) {
                this.status = "nomore"
            }
        }
    }
}
</script>
<style lang="scss" scoped>
    .container {
        box-sizing: border-box;
        overflow: hidden;
        padding: 0 15rpx;
    }
</style>
